<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Animal Crossing - Turnip Prophet</title>
  <meta name="description" content="Animal Crossing - Turnip Prophet">
  <meta name="author" content="Mike Bryant">
  <meta name="theme-color" content="#def2d9">

  <!-- generics -->
  <link rel="icon" href="img/favicon-32.png" sizes="32x32">
  <link rel="icon" href="img/favicon-128.png" sizes="128x128">
  <link rel="icon" href="img/favicon-192.png" sizes="192x192">

  <!-- Android -->
  <link rel="shortcut icon" href="img/favicon-196.png" sizes="196x196">

  <!-- iOS -->
  <link rel="apple-touch-icon" href="img/favicon-152.png" sizes="152x152">
  <link rel="apple-touch-icon" href="img/favicon-167.png" sizes="167x167">
  <link rel="apple-touch-icon" href="img/favicon-180.png" sizes="180x180">

  <link rel="manifest" href="/manifest.json">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-162470902-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'UA-162470902-1');
  </script>


  <script>
    function detectTheme() {
      let systemTheme = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
      let preferredTheme = localStorage.getItem("theme");
      
      if (preferredTheme == "dark" || (systemTheme == "dark" && preferredTheme != "light")) {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    }
    detectTheme();
  </script>
</head>


<body>

  <div class="dialog-box">
    <h2 class="dialog-box__name" data-i18n="general.daisy-mae"></h2>
    <p data-i18n="[html]welcome.salutation"></p>
    <p data-i18n="welcome.description"></p>
    <p data-i18n="[html]welcome.conclusion"></p>
  </div>

  <div class="nook-phone">
    <h1>Turnip Prophet</h1>

    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>

    <div class="nook-phone-center">



      <form class="input__form">
        <div class="form__row">
          <h6 data-i18n="first-time.title"></h6>
          <div class="input__group">
            <label data-i18n="[html]first-time.description"></label>
            <div class="input__radio-buttons">
              <input type="radio" id="first-time-radio-no" name="first-time" value="false" checked>
              <label for="first-time-radio-no" data-i18n="first-time.no"></label>
              <input type="radio" id="first-time-radio-yes" name="first-time" value="true">
              <label for="first-time-radio-yes" data-i18n="first-time.yes"></label>
            </div>
          </div>
        </div>

        <div class="form__row">
          <h6 data-i18n="patterns.title"></h6>
          <div class="input__group">
            <label for="" data-i18n="[html]patterns.description"></label>
            <div class="input__radio-buttons">
              <input type="radio" id="pattern-radio-unknown" name="pattern" value="-1" checked>
              <label data-i18n="patterns.unknown" for="pattern-radio-unknown"></label>
              <input type="radio" id="pattern-radio-fluctuating" name="pattern" value="0">
              <label data-i18n="patterns.fluctuating" for="pattern-radio-fluctuating"></label>
              <input type="radio" id="pattern-radio-small-spike" name="pattern" value="3">
              <label data-i18n="patterns.small-spike" for="pattern-radio-small-spike"></label>
              <input type="radio" id="pattern-radio-large-spike" name="pattern" value="1">
              <label data-i18n="patterns.large-spike" for="pattern-radio-large-spike"></label>
              <input type="radio" id="pattern-radio-decreasing" name="pattern" value="2">
              <label data-i18n="patterns.decreasing" for="pattern-radio-decreasing"></label>
            </div>
          </div>
        </div>

        <div class="form__row">
          <h6 data-i18n="weekdays.sunday"></h6>
          <div class="input__group">
            <label data-i18n="[html]prices.description" for='buy'></label>
            <input type="number" pattern="\d*" id="buy" placeholder="..." />

          </div>
        </div>
        <i data-i18n="prices.open.am"></i>
        <i data-i18n="prices.open.pm"></i>
        <div class="form__flex-wrap">
          <div class="form__row">
            <h6 data-i18n="weekdays.monday"></h6>
            <div class="input__group">
              <label data-i18n="times.morning" for="sell_2"></label>
              <input type="number" pattern="\d*" id="sell_2" placeholder="..." />
            </div>
            <div class="input__group">
              <label data-i18n="times.afternoon" for="sell_3"></label>
              <input type="number" pattern="\d*" id="sell_3" placeholder="..." />
            </div>
          </div>

          <div class="form__row">
            <h6 data-i18n="weekdays.tuesday"></h6>
            <div class="input__group">
              <label data-i18n="times.morning" for="sell_4"></label>
              <input type="number" pattern="\d*" id="sell_4" placeholder="..." />
            </div>
            <div class="input__group">
              <label data-i18n="times.afternoon" for="sell_5"></label>
              <input type="number" pattern="\d*" id="sell_5" placeholder="..." />
            </div>
          </div>

          <div class="form__row">
            <h6 data-i18n="weekdays.wednesday"></h6>
            <div class="input__group">
              <label data-i18n="times.morning" for="sell_6"></label>
              <input type="number" pattern="\d*" id="sell_6" placeholder="..." />
            </div>
            <div class="input__group">
              <label data-i18n="times.afternoon" for="sell_7"></label>
              <input type="number" pattern="\d*" id="sell_7" placeholder="..." />
            </div>
          </div>

          <div class="form__row">
            <h6 data-i18n="weekdays.thursday"></h6>
            <div class="input__group">
              <label data-i18n="times.morning" for="sell_8"></label>
              <input type="number" pattern="\d*" id="sell_8" placeholder="..." />
            </div>
            <div class="input__group">
              <label data-i18n="times.afternoon" for="sell_9"></label>
              <input type="number" pattern="\d*" id="sell_9" placeholder="..." />
            </div>
          </div>

          <div class="form__row">
            <h6 data-i18n="weekdays.friday"></h6>
            <div class="input__group">
              <label data-i18n="times.morning" for="sell_10"></label>
              <input type="number" pattern="\d*" id="sell_10" placeholder="..." />
            </div>
            <div class="input__group">
              <label data-i18n="times.afternoon" for="sell_11"></label>
              <input type="number" pattern="\d*" id="sell_11" placeholder="..." />
            </div>
          </div>

          <div class="form__row">
            <h6 data-i18n="weekdays.saturday"></h6>
            <div class="input__group">
              <label data-i18n="times.morning" for="sell_12"></label>
              <input type="number" pattern="\d*" id="sell_12" placeholder="..." />
            </div>
            <div class="input__group">
              <label data-i18n="times.afternoon" for="sell_13"></label>
              <input type="number" pattern="\d*" id="sell_13" placeholder="..." />
            </div>
          </div>
        </div>
        <input id="permalink-input" type="text" readOnly />
        <div id="permalink-btn" class="button permalink">
          <span data-i18n="prices.copy-permalink"></span>
          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path fill="currentColor" d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"></path>
          </svg>
        </div>
        <button type="button" id="reset" class="button button--reset" name="action" data-i18n="prices.reset"></button>
      </form>



      <h2 data-i18n="output.title"></h2>

      <div class="dialog-box error">
        <h2 class="dialog-box__name" data-i18n="general.daisy-mae"></h2>
        <p data-i18n="errors.impossible-values"></p>
        <p data-i18n="[html]errors.github"></p>
      </div>

      <div class="chart-wrapper">
        <canvas id="chart" width="100%" height="100"></canvas>
      </div>

      <div class="table-wrapper">
        <table id="turnipTable">
          <thead>
            <tr>
              <th valign="bottom" data-i18n="patterns.pattern"></th>
              <th colspan="2" valign="bottom" data-i18n="output.chance"></th>
              <th colspan="2">
                <div data-i18n="weekdays.monday"></div>
                <div>
                  <span data-i18n="times.morning"></span>
                  <span data-i18n="times.afternoon"></span>
                </div>
              </th>
              <th colspan="2">
                <div data-i18n="weekdays.tuesday"></div>
                <div>
                  <span data-i18n="times.morning"></span>
                  <span data-i18n="times.afternoon"></span>
                </div>
              </th>
              <th colspan="2">
                <div data-i18n="weekdays.wednesday"></div>
                <div>
                  <span data-i18n="times.morning"></span>
                  <span data-i18n="times.afternoon"></span>
                </div>
              </th>
              <th colspan="2">
                <div data-i18n="weekdays.thursday"></div>
                <div>
                  <span data-i18n="times.morning"></span>
                  <span data-i18n="times.afternoon"></span>
                </div>
              </th>
              <th colspan="2">
                <div data-i18n="weekdays.friday"></div>
                <div>
                  <span data-i18n="times.morning"></span>
                  <span data-i18n="times.afternoon"></span>
                </div>
              </th>
              <th colspan="2">
                <div data-i18n="weekdays.saturday"></div>
                <div>
                  <span data-i18n="times.morning"></span>
                  <span data-i18n="times.afternoon"></span>
                </div>
              </th>
              <th valign="bottom" data-i18n="output.minimum"></th>
              <th valign="bottom" data-i18n="output.maximum"></th>
            </tr>
          </thead>
          <tbody id="output"></tbody>
        </table>
      </div>
    </div>

    <div style="transform:rotate(180deg)">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
  </div>

  </div>

  <div class="dialog-box">
    <h2 class="dialog-box__name" data-i18n="general.daisy-mae"></h2>
    <p data-i18n="textbox.description"></p>
    <p data-i18n="textbox.development"></p>
  </div>

  <div class="dialog-box">
    <h2 class="dialog-box__name" data-i18n="general.daisy-mae"></h2>
    <p data-i18n="[html]textbox.thanks"></p>
    <p data-i18n="[html]textbox.support"></p>
    <p data-i18n="textbox.contributors-text"></p>
    <p id="contributors"><span data-i18n="textbox.contributors"></span>: </p>
    <p data-i18n="[html]textbox.sponsor"></p>
    <div class="dialog-box-option">
      <p><label for='language' data-i18n="textbox.language"></label>:</p> <select id="language"></select>
    </div>
    <div class="dialog-box-option">
      <p><label for='theme' data-i18n="textbox.theme.title"></label>:</p> <select id="theme"></select>
    </div>
  </div>

  <div id="snackbar">Some text some message...</div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/19.4.2/i18next.min.js" integrity="sha384-heKFZqp863HDEF6obW4Nvk9hF5pRjZThVwrDiV+tSCKPBTnu6vf5lu8QJGDwGv0X" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-xhr-backend/3.2.2/i18nextXHRBackend.min.js" integrity="sha384-E1yZPo675XVLefQp/3MbG3T1eRDvW41iRKovK3OCHS2dWMrcF/F3/+74qwmoX1jX" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-browser-languagedetector/4.0.2/i18nextBrowserLanguageDetector.min.js" integrity="sha384-FYlRD8WE3hzVKyoaW6rmqYtUfv1ajxElK/c9bKM1NUnbsJ/VUiUv2YFEQP1AJdOQ" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.1/jquery-i18next.min.js" integrity="sha384-fLTSt6zHOb152KeFkj7kSiXdkyjKf6fjk5bdzWYLDPDo9evwd9PVs3TKoYYaaxdl" crossorigin="anonymous"></script>
  <script src="js/chart.js"></script>
  <script src="js/predictions.js"></script>
  <script src="js/scripts.js"></script>
  <script src="js/translations.js"></script>
  <script src="js/contributors.js"></script>
  <script src="js/themes.js"></script>
  <script>
    // Check compatibility for the browser we're running this in
    if ("serviceWorker" in navigator) {
      if (navigator.serviceWorker.controller) {
        console.log(
          "[PWA] Service Worker already found, skipping register"
        );
      } else {
        // Register the service worker
        navigator.serviceWorker
          .register("/service-worker.js", {
            scope: "./",
          })
          .then(function (reg) {
            console.log(
              "[PWA] Service worker has been registered for scope: " +
                reg.scope
            );
          });
      }
    }
  </script>
</body>
</html>
